<template>
  <div class='container'>
    <el-dialog title="预览文章" :visible="previewDialog" width="800px" @close="close">
      <h2>{{ articleDetail.title }}</h2>
      <div>
        <span>{{ articleDetail.createTime | parseTime }}</span>
        <span class="article-username">{{ articleDetail.username }}</span>
        <i class="el-icon-view"> {{ articleDetail.visits }}</i>
      </div>
      <div v-html="articleDetail.articleBody" class="article-contents">        
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    previewDialog: {
      type: Boolean,
      default: false
    },
    articleDetail: {
      type: Object,
      required: true
    }
  },  
  methods: {    
    // 关闭弹窗
    close () {
      this.$emit('update:previewDialog', false)
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-dialog__body{
  padding-top: 10px;

  img{
    max-width: 98%;
  }
}
::v-deep .article-username{
  margin: 0 15px;
}
::v-deep .article-contents {
  padding-left: 15px;
  padding-bottom: 15px;
  margin-top: 20px;
  background-color: #f5f5f5;
  border-top: 1px dashed #ccc;
}
</style>
